<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>综合选择器练习</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .thumbnail {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border: 3px solid #ddd;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .thumbnail:hover {
      transform: scale(1.05);
      border-color: #4CAF50;
    }

    .first-last {
      border-color: #ff9800;
    }

    .middle {
      opacity: 0.8;
      filter: sepia(50%);
    }

    #display {
      margin-top: 20px;
    }

    #large-image {
      max-width: 100%;
      max-height: 400px;
      border: 2px solid #333;
    }
  </style>
</head>
<body>
<h1>图片画廊</h1>
<div class="gallery">
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
</div>
<div id="display">
  <span>helloworld</span>
</div>

<script>
  $(document).ready(function () {
    // 为第一张和最后一张div添加特殊边框
    $(".thumbnail:first, .thumbnail:last").addClass("first-last");

    // 为中间div添加不同效果
    $(".thumbnail:not(:first):not(:last)").addClass("middle");

  });
</script>
</body>
</html>
